<template>
	<view style="position: relative;">
		<swiper style="height: 146rpx;" :indicator-dots="false" @change="current = $event.detail.current">
			<swiper-item v-for="(list, lindex) in menus" :key="lindex">
				<view class="flex-center-between u-text-center" style="padding: 0 34rpx;">
					<view v-for="(item, index) in list" :key="index" @click="jumpUrl(item.page)" style="width: calc(100% / 5)">
						<image :src="item.icon" style="width: 88rpx; height: 88rpx;" class="clear-flex"></image>
						<view class="u-m-t-16 u-f-28 u-lh-40 linecamp-1">{{ lang_index[item.key] }}</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="u-m-t-16 flex-center-center">
			<view v-for="(item, index) in menus" :key="index"
				:class="[`item-round${ index == current ? '-active' : ''}`]"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				default: () => ([])
			},
			count: {
				default: 5
			}
		},
		data() {
			return {
				current: 0,
			}
		},
		computed: {
			menus() {
				let menus = [],
					nohas = false,
					start = 0,
					end = 0,
					max = this.count;
				while (!nohas) {
					end = (start + max)
					let list = this.list.slice(start, end);
					menus = [...menus, list]
					nohas = this.list.length <= (end)
					start += max
				}
				return menus;
			}
		}
	}
</script>

<style scoped lang="scss">
	.item-round {
		width: 14rpx;
		height: 14rpx;
		margin: 0 6rpx;
		border-radius: 20rpx;
		transition: all 0.5s;
		background-color: #D8D8D8;
	
		&-active {
			@extend .item-round;
			width: 34rpx;
			background-color: #FC2642;
		}
	}
</style>
